<template>
  <div class="search-bar">
    <div class="input-wrap">
      <div class="icon iconfont-zui icon-zui-search"></div>
      <input class="input" v-model="inputValue" type="text" placeholder="搜索" />
      <div v-if="modelValue" class="clear iconfont-zui icon-zui-clear" @click="onClearClick"></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])

const inputValue = computed({
  set(v) {
    emit('update:modelValue', v)
  },
  get() {
    return props.modelValue
  }
})
function onClearClick() {
  emit('update:modelValue', undefined)
}
</script>

<style lang="scss" scoped>
.search-bar {
  background-color: #ffffff;
  padding: 8px 20px;
  .input-wrap {
    padding: 0 10px;
    display: flex;
    align-items: center;
    background-color: var(--zui-color-background);
    border-radius: var(--zui-size-border-radius-small);
    .icon {
      color: var(--zui-color-text-secondary);
    }
    .input {
      margin-left: 8px;
      height: 32px;
      flex: 1;
      &::placeholder {
        color: var(--zui-color-text-placeholder);
      }
    }
    .clear {
      color: var(--zui-color-text-secondary);
      cursor: pointer;
    }
  }
}
</style>
